{extend name="base" /}
{block name="body"} 
<div class="layui-card">

    <table id="ems" lay-filter="ems"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="fa fa-trash-o"></i>{:__('Multiple choice deletion')}</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh-3"></i>{:__('Refresh')}</button>
    </div>
</script>

    <!-- 表格操作列 -->
    <script type="text/html" id="tableTBTrack">
        <a href="{:url('ems/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="410px" data-height="310px"><i class="layui-icon layui-icon-edit"></i>{:__('modify')}</a>
        <a href="{:url('ems/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" tiptext="确认删除ID{{d.id}}"><i class="layui-icon layui-icon-delete"></i>{:__('delete')}</a>
    </script>
<script type="text/html" id="status">
        <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="{:__('normal')}|过期" data-url="{:url('ems/edit')}?id={{d.id}}" {{d.status==1?'checked':''}}>
    </script>
</div>
{/block}

{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'dropdown'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var dropdown = layui.dropdown;

        // 渲染回访表格
        var insTb = table.render({
            elem: '#ems',
            toolbar: '#toolbarDemo',  //开启头部工具栏，并为其绑定左侧模板
            url: "{:url('ems/index_json')}",
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
                 //,curr: 5 //设定初始在第 5 页
            ,groups: 5 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
            ,prev: '<em>上一页</em>'
            ,next: '<em>下一页</em>'
            } ,
            cellMinWidth: 100,
            limit:'15',
            limits:['15','30','50','100','200','500'],
            size:'lg',even:true,
            cols: [[
               {
                type: 'checkbox'
           }, {
                type:'numbers',
                title:'#', 
                width: 60
           }, {
                field: 'event', 
                title: '事件', 
                align: 'center', 
                width: 140
           }, {
                field: 'email', 
                title: '邮箱', 
                align: 'center',
                 width: 200
           }, {
                field: 'code', 
                title: '验证码', 
                align: 'center', 
                width: 100
           }, {
                field: 'times', 
                title: '验证次数', 
                align: 'center', 
                width: 60
           }, {
                field: 'exptime', 
                title: '过期时间', 
                align: 'center', 
                width: 160, 
                templet:"<div>{{layui.util.toDateString(d.exptime*1000, 'yyyy-MM-dd HH:mm:ss')}}</div>"
           }, {
                field: 'create_time', 
                title: '创建时间', 
                align: 'center', 
                width: 160
           }, {
                align: 'center', 
                sort: true, 
                title: '状态',
                templet:'#status',
                width:90
           }, {
                align: 'center', 
                toolbar: '#tableTBTrack', 
                title: '操作', 
                minWidth: 200
           }
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });

    });
  //头工具栏事件
        table.on('toolbar(ems)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'delete':
             
                    var data = checkStatus.data;
                    var ids = [];
                    data.forEach(item => {
                        ids.push(item.id);
                    });
                    if (ids <= 0) {
                        return layer.msg('{:__('Please select a line')}', {icon: 0});
                    }
                layer.confirm('<i class="layui-icon layui-icon-help" style="font-size: 16px; color: #1E9FFF;"></i>确定删除?', function (index) {
                 var index = layer.msg('提交中，请稍候', {icon: 16,time: false,shade: 0.3});
                  $.post('/ems/del', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                    });
                    break;
                case 'refresh':
                    location.reload();
                    break;
            }
        });
</script>
{/block}